<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Code Quality Checker</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul,
			ol {
				list-style: none;
			}
			.header {
				padding: 0 10%;
				height: 254px;
				background-color: #55aa68;
				display: flex;
				flex-direction: column;
			}
			.nav {
				margin-top: 31px;
				font-size: 14px;
				text-align: right;
			}
			.nav a {color: #fff; padding: 0 8px;}
			
			.hd-title {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			.hd-title-txt {
				font-size: 50px;
				color: #fff;
				padding: 20px 0;
				margin-top: 20px;
			}
			.hd-title-remark {
				font-size: 18px;
				color: rgb(247, 247, 247);
			}

			.mbox {
				margin: 20px 10% 0 10%;
				padding-bottom: 20px;
			}

			.statement {
				display: flex;
				flex-direction: row;
			}
			.sm-area {
				flex: 0 1 auto;
				width: 50%;
			}
			.total-table {
				margin: 20px 0;
			}
			.total-table-sty {
				width: 100%;
				border: 1px solid rgb(206, 206, 206);
			}
			.total-table-sty thead {
				background-color: rgb(206, 206, 206);
				line-height: 30px;
			}
			.total-table-sty td {
				text-indent: 10px;
				font-size: 14px;
				width: 25%;
			}
			.file-lst {
				font-size: 24px;
				border-bottom: 1px solid rgb(192, 192, 192);
				color: rgb(192, 192, 192);
				margin-bottom: 20px;
				padding: 10px 0;
			}

			.fl-item-ul {
				width: 100%;
				font-weight: normal;
				border-radius: 5px;
				border: 1px solid #ddd;
				border-spacing: 0px;
			}
			.fl-item-li {
				background-color: #ddd;
				height: 38px;
				line-height: 38px;
				color: #444;
				text-indent: 0.8em;
			}
			.fl-table {
				border-collapse: collapse;
				width: 100%;
			}
			.fl-table tr {
				border-bottom: 1px dashed #ddd;
			}
			/* .fl-table tr:first-child {
				background-color: rgb(233, 233, 233);
			} */
			.fl-table tr:last-child {
				border-bottom-width: 0;
			}
			.fl-table th {
				color: #4ea2ab;
			}
			.fl-table th , .fl-table td {
				font-size: medium;
				cursor: pointer;
				text-align: center;
				padding: 4px 0;
				width: 10%;
			}
			.fl-table th:first-child , .fl-table td:first-child, .fl-table th:last-child , .fl-table td:last-child { width: 15%; }

			.c-error{color: #d11b1a;}
			.top {
				width: 40px;
				height: 40px;
				background-color: rgba(51, 51, 51, 0.8);
				color: #fff;
				position: fixed;
				right: 10px;
				bottom: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.top::before {
				display: inline-block;
				border-top: 2px solid;
				border-right: 2px solid;
				width: 10px;
				height: 10px;
				border-color: #fff;
				transform: rotate(-45deg);
				margin-top: 5px;
				content: ' ';
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="header">
			<div class="nav">
				<span><a href="./index.html">重复率</a></span>
				<span><a href="./eslint.html">Eslint</a></span>
				<span><a href="./sloc.html">注解率及行数</a></span>
			</div>
			<div class="hd-title">
				<div class="hd-title-txt">Code Quality Checker</div>
				<div class="hd-title-remark">javascript代码检测工具</div>
			</div>
		</div>

		<div class="mbox">
			<aside class="statement">
				<div id="sm-area-1" style="width: 100%; height: 400px;"></div>
				<script type="text/javascript">
					(function () {
						// 基于准备好的dom，初始化echarts实例
						var myChart = echarts.init(document.getElementById('sm-area-1'));

						// 指定图表的配置项和数据
						var option = {
							title: {
								text: '代码占比',
								x: 'right',
							},
							tooltip : {
								trigger: 'item',
								formatter: "{a} <br/>{b} : {c} ({d}%)"
							},
							legend: {
								orient: 'vertical',
								x: 'left',
								y: 'center',
								data: [
									'代码总行数',
									'单行备注行数',
									'多行备注行数',
									'代码后注解',
									'todo的注释',
								],
							},
							series: [
								{
									name: '代码占比',
									type: 'pie',
									radius: '80%',
									data: [
										{ value: <%=total%>, name: '代码总行数' },
										{ value: <%=single%>, name: '单行备注行数' },
										{ value: <%=block%>, name: '多行备注行数' },
										{ value: <%=mixed%>, name: '代码后注解' },
										{ value: <%=todo%>, name: 'todo的注释' },
									],
								},
							],
						};

						// 使用刚指定的配置项和数据显示图表。
						myChart.setOption(option);
					})();
				</script>
			</aside>

			<aside class="total-table">
				<table class="total-table-sty">
					<thead>
						<tr>
							<td>代码总行数</td>
							<td>总备注行数</td>
							<td>占比</td>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><%=source%></td>
							<td><%=comment+mixed%></td>
							<td><%=Math.round(((comment+mixed)/source).toFixed(2)*100)%>%</td>
						</tr>
					</tbody>
				</table>
			</aside>

			<article>
				<div class="file-lst">Capture</div>

				<div class="fl-item-lst">

					<ul class="fl-item-ul">
						<li>
							<table class="fl-table">
								<tr>
									<th>面页行数</th>
									<th>代码行数(<860)</th>
									<th>总注释行</th>
									<th>单行注释</th>
									<th>多行注释</th>
									<th>行后注释</th>
									<th>空行</th>
									<th>todo</th>
									<th>占比(>20%)</th>
								</tr>
							</table>
						</li>


						<% oResLstKeys.forEach(function(sKey){ %>
						<li class="fl-item-li">
							<%=sKey%>
						</li>
						<li>
							<table class="fl-table">
								<tr>
									<td><%=oResLst[sKey]['total']%></td>
									<td<% if(oResLst[sKey]["source"] > 860){ %> class="c-error"<% } %>><%=oResLst[sKey]['source']%></td>
									<td><%=oResLst[sKey]['comment']+oResLst[sKey]['mixed']%></td>
									<td><%=oResLst[sKey]['single']%></td>
									<td><%=oResLst[sKey]['block']%></td>
									<td><%=oResLst[sKey]['mixed']%></td>
									<td><%=oResLst[sKey]['empty']%></td>
									<td><%=oResLst[sKey]['todo']%></td>
									<td<% if(oResLst[sKey]["percentage"] < 20){ %> class="c-error"<% } %>><%=oResLst[sKey]['percentage']%>%</td>
								</tr>
							</table>
						</li>
						<% }); %>

					</ul>
				</div>
			</article>
		</div>
		<div class="top" id="top" onclick="document.body.scrollTop = document.documentElement.scrollTop=0"></div>
	</body>
</html>
